<script setup>
import {onMounted, onUnmounted, watch} from "vue";

import {useRoute} from "vue-router"

const route = useRoute();

watch(route, (r)=>{
  console.log(r.params.id);
})

onMounted(()=>{
  console.log(route.params.id + " 案例详情组件挂载")
})

onUnmounted(()=>{
  console.log(route.params.id + " 案例详情组件卸载")
})

</script>

<template>
  <div class="about">

    <h3>这是案例详情</h3>

    <p>$route.query的内容为：{{ $route.query }}</p>
    <p>$route.query.id的内容为：{{ $route.query.id }}</p>
    <br>
    <p>$route.params的内容为：{{ $route.params }}</p>
    <p>$route.params.index的内容为：{{ $route.params.id }}</p>
    
  </div>
</template>

<style>
</style>
